<html>
<head>
<title>直方图</title>
</head>
<script src="echarts.js"></script>
<script src="ecStat.js"></script>

<script>

    
</script>
<body>
    <div id="main" style="width: 600px;height:400px;"></div>
    
<script>
    var height = [70, 65, 63, 72, 81, 83, 66, 75, 80, 75, 79, 76, 76, 69, 75, 74, 85, 86, 71, 64, 78, 80, 74, 72, 77, 81, 82, 80, 80, 80, 87];
    // histogram直方图计算没个数字的个数
    var bins = ecStat.histogram(height);
    var myChart = echarts.init(document.getElementById('main'));

var option = {
    tooltip:{
        trigger:'axis',
    },
    // 直线颜色'rgb(25, 183, 207)'
    color: ['rgb(25, 183, 207)'],
    // 图表位置
    grid: {
        left: '3%',
        right: '3%',
        bottom:'3%',  
            //   区域是否包含x坐标轴的刻度标签。
        containLabel: true
    },
    // 横坐标数据
    xAxis: {
        type: 'value',
        //这个一定要设，不然barWidth和bins对应不上
        // 是否是脱离 0 值比例。设置成 true 后坐标刻度不会强制包含零刻度。在双数值轴的散点图中比较有用。
        scale: true,
    },
    yAxis: {
        type: 'value',
    },
    series: [{
        type: 'line',
        // 99.3%
        barWidth: '99.3%',
        // label 标签
        label: {
            normal: {
                show: true,
                // position位置
                // position选项insideTop
                position: 'insideTop',
                // 格式化formatter
                // formatter: function (params) {
                //     return params.value[1];
                // }
            }
        },
        // data:height
        data: bins.data
    }]
};
myChart.setOption(option);

</script>

</body>

</html>